<template>
    <van-popup
            v-model="visible"
            :closeable="false"
            close-icon="close"
            position="bottom"
            class="fullWin"
    >
        <van-pull-refresh v-model="isRefresh" @refresh="loadData">

            <div class="wdp-5">
                <!--导航栏-->
                <bpm-nav-bar title="流程中心" :leftArrow="true" @close="close"></bpm-nav-bar>

                <van-cell-group>
                    <van-cell class="borderless">
                        <h3>
                            常用流程
                        </h3>
                    </van-cell>
                </van-cell-group>

                <van-grid>
                    <van-grid-item v-for="process in customProcessList" :key="process.id"
                                   icon="photo-o" :text="process.name"
                                   @click="addFromProcess(process.id)"/>
                </van-grid>

                <div v-for="group in appAndProcessList" :key="group.id">
                    <van-cell-group>
                        <van-cell class="borderless">
                            <h3>
                                {{group.groupName}}
                            </h3>
                        </van-cell>
                    </van-cell-group>
                    <van-grid>
                        <van-grid-item v-for="process in group.children" :key="process.id"
                                       icon="photo-o" :text="process.name"
                                       @click="addFromProcess(process.id)"/>
                    </van-grid>
                </div>
            </div>
        </van-pull-refresh>

        <div class="foot">
            <van-tabbar class="py-5">
                <van-tabbar-item @click="close">
                    <van-button icon="close"></van-button>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </van-popup>
</template>

<script>

    import bpmNavBar from '../../components/bpmNavBar';

    export default {
        name: 'flowCenter',
        components: {
            bpmNavBar,
        },
        props: {
            visible: Boolean,
        },
        data() {
            return {
                loaded: false,
                isRefresh: false,
                appAndProcessList: [],
                customProcessList: [],
                url: {
                    getAppAndCustomProcDefList: '/api/eform/manage/actAppGroup/getAppAndCustomProcDefList?isMobile=true',
                }
            }
        },
        methods: {
            loadData() {
                this.$mask.open();
                this.$http.get(this.url.getAppAndCustomProcDefList).then((res) => {
                    this.appAndProcessList = res.result.appAndProcessList;
                    this.customProcessList = res.result.customProcessList;
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.isRefresh = false;
                    this.loaded = true;
                    this.$mask.close();
                });
            },
            addFromProcess(processDefId) {
                this.$emit("addFromProcess", processDefId);
                const that = this;
                setTimeout(function () {
                    that.close();
                }, 300);
            },
            close() {
                this.$emit('toIndex');
            }
        },
        watch: {
            visible(value) {
                if (value && !this.loaded) {
                    this.loadData();
                }
            }
        }
    }
</script>
